<template>
  <div :class="keyboardClass" style="margin-top: 15px;"></div>
</template>
  
  <script>
import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";

export default {
  name: "SimpleKeyboard",
  props: {
    keyboardClass: {
      default: "simple-keyboard",
      type: String,
    },
    input: {
      type: String,
    },
    isVibrate:{
      default:true
    }
  },
  data: () => ({
    keyboard: null,
  }),
  mounted() {
    this.keyboard = new Keyboard({
      onChange: (input) => this.onChange(input),
      onKeyPress: (button) => this.onKeyPress(button),
      mergeDisplay: true,
      layoutName: "default",
      layout: {
        default: [
          "q w e r t y u i o p",
          "a s d f g h j k l",
          "{shift} z x c v b n m {backspace}",
          "{numbers} - {space} . {ent}",
        ],
        shift: [
          "Q W E R T Y U I O P",
          "A S D F G H J K L",
          "{shift} Z X C V B N M {backspace}",
          "{numbers} - {space} . {ent}",
        ],
        numbers: ["1 2 3", "4 5 6", "7 8 9", "{abc} 0 {backspace}"],
      },
      display: {
        "{numbers}": "123",
        "{ent}": "回车",
        "{escape}": "esc ⎋",
        "{tab}": "tab ⇥",
        "{backspace}": "⌫",
        "{capslock}": "caps lock ⇪",
        "{shift}": "⇧",
        "{controlleft}": "ctrl ⌃",
        "{controlright}": "ctrl ⌃",
        "{altleft}": "alt ⌥",
        "{altright}": "alt ⌥",
        "{metaleft}": "cmd ⌘",
        "{metaright}": "cmd ⌘",
        "{abc}": "ABC",
        '{space}':'空格'
      },
    });
  },
  methods: {
    onChange(input) {
      // console.log('onChange',input)
      this.$emit("onChange", input);
    },
    onKeyPress(button) {
      if(this.isVibrate&&"vibrate" in navigator)navigator.vibrate(30);
      if (button === "{shift}" ||button=='{numbers}'||button=="{abc}") this.handleShift(button);
      else if(button=='{ent}') this.$emit("onKeyPress", button);
    },
    handleShift(button) {
      let shiftToggle
      let currentLayout = this.keyboard.options.layoutName;
      if(button=='{numbers}')shiftToggle='numbers';
      else shiftToggle = currentLayout === "default" ? "shift" : "default";
      this.keyboard.setOptions({
        layoutName: shiftToggle,
      });
    },
    restoreVKeyboardInput(){
      this.keyboard.clearInput();
    },
    setVKeyboardInput(content){
      this.keyboard.setInput(content)
    }
  },
  watch: {
    input(input) {
      this.keyboard.setInput(input);
    },
  },
};
</script>
<style scoped>
input {
  width: 100%;
  height: 100px;
  padding: 20px;
  font-size: 20px;
  border: none;
  box-sizing: border-box;
}

.simple-keyboard {
  max-width: 500px;
  margin: 0 auto;
}

.simple-keyboard .hg-button.hg-functionBtn.hg-button-space {
  min-width: 150px;
  max-width: none;
}

.simple-keyboard.hg-theme-default .hg-button[data-skbtnuid^="numbers-"] {
  width: 33%;
  max-width: none;
}

.simple-keyboard .hg-button-numbers {
  max-width: 80px;
}

.simple-keyboard .hg-button.hg-functionBtn.hg-button-ent {
  max-width: 80px;
}
@media screen and (max-width: 500px) {
  .simple-keyboard {
    width: 100vw;
    margin-left: -15px;
  }
}
</style>
  